
<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 style="text-align: center; margin-bottom: 30px;">系统修改密码</h2>

      <el-form :model="updatePwdForm" @submit.prevent="handleUpdatePwd">
        <el-form-item>
          <el-input
              v-model="updatePwdForm.yhm"
              placeholder="用户名"
              prefix-icon="User"
              size="large"
          />
        </el-form-item>

        <el-form-item>
          <el-input
              v-model="updatePwdForm.phone"
              placeholder="请输入手机号"
              prefix-icon="Phone"
              type="text"
          size="large"
          />
        </el-form-item>

        <el-form-item>
          <el-input
              v-model="updatePwdForm.newPwd"
              placeholder="输入新密码"
              prefix-icon="Lock"
              type="password"
              show-password
              size="large"
          />
        </el-form-item>

        <el-form-item style="margin-top: 30px;">
          <el-button
              type="primary"
              native-type="submit"
              style="width: 100%; height: 50px; font-size: 16px;"
          >
            修改密码
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from "axios";
import { useRouter } from 'vue-router'

const router = useRouter()
const updatePwdForm = ref({  // 变量名修改为"修改密码表单"
  yhm: '',       // 用户名
  phone: '',     // 手机号
  newPwd: ''     // 新密码
})
const user = ref({
  yhm: '',
  pwd: ''
})
// 根据用户名查询用户信息（获取手机号用于验证）
const getUserByYhm = async () => {
  try {
    const { data } = await axios.get(`/api/user/yhm/${updatePwdForm.value.yhm}`);
    return data;
  } catch (error) {
    ElMessage.error('查询用户信息失败');
    return null;  // 出错时返回null
  }
}

const handleUpdatePwd = async () => {
  // 1. 基础验证
  if (!updatePwdForm.value.yhm) {
    ElMessage.error('请输入用户名');
    return;
  }
  if (!/^1[3-9]\d{9}$/.test(updatePwdForm.value.phone)) {
    ElMessage.error('请输入正确的手机号');
    return;
  }
  if (updatePwdForm.value.newPwd.length < 6) {
    ElMessage.error('新密码长度不能少于6位');
    return;
  }

  // 2. 验证手机号是否与用户名匹配
  const userData = await getUserByYhm();
  if (!userData) {
    ElMessage.error('用户名不存在');
    return;
  }
  user.value.yhm = userData.yhm;
  if (userData.phone !== updatePwdForm.value.phone) {
    ElMessage.error('手机号与用户名不匹配');
    return;
  }
  user.value.pwd = updatePwdForm.value.newPwd;
  // 3. 调用修改密码API

  const {data} = await axios.put("/api/user", user.value);
  if (data != null && data !== ''){
    ElMessage.success('修改密码成功');
    router.push('/yycsh/')
  }
  else
    ElMessage.error('修改密码失败');
}
</script>

<style scoped>
/* 样式保持不变 */
.login-container {
  display: flex;
  position: fixed;
  right: 20px;
  align-items: center;
  min-height: 100vh;
  width: 500px;
}


.login-card {
  width: 400px;
  min-height: 350px;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-input {
  height: 50px;
  font-size: 16px;
}
</style>